import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { ShareSheet, ProductCard, SubmitBar, Switch } from 'react-vant'
import { useNavigate, useLocation } from 'react-router-dom'
import { SendOutline } from 'antd-mobile-icons'
import { AddSquare } from '@react-vant/icons'
import { Cell } from 'react-vant'
import { useAppSelector } from '../../store/store'
import http from '../../utils/http'
interface CartItem {
    restorativesid: string;
    restorativesname: string;
    restorativesprice: number;
    restorativesdesc: string;
    restorativesimage: string;
    count: number;
}
const Index: React.FC = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const totalprice = location.state?.totalprice
    const [visible, setVisible] = useState(false)
    const { cartlist } = useAppSelector(state => state.cartSlice)
    const options = [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: 'QQ', icon: 'qq' },
    ]
    // 支付
    const handpay = () => {
        http.get('/pay', {
            params: {
                id: 1,
                price: totalprice,
                title: '支付',
                body: '所有商品'
            }
        }).then((res) => {
            const { result, code } = res.data
            if (code === 200) {
                window.location.href = result
            }
        })
    }
    return (
        <div>
            <NavBar onBack={() => navigate('/')} style={{ background: '#fff', position: 'sticky', top: '0', zIndex: '99999' }} right={<SendOutline onClick={() => setVisible(true)} fontSize={'1.5rem'} />}>订单确认</NavBar>
            {/* 分享面板 */}
            <ShareSheet
                visible={visible}
                options={options}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onSelect={(option, index) => {
                    console.log('option', option)
                    console.log('index', index)
                    setVisible(false)
                }}
            />
            <Cell title='新增收货地址' icon={<AddSquare color='#5e9af0' />} onClick={() => navigate('/shouhuoadd')} isLink />
            <div style={{ height: '100%', borderRadius: '16px', width: '100%', margin: '0 auto', background: '#fff', marginTop: '10px' }}>
                {
                    cartlist && cartlist.map((item: CartItem, index: number) => {
                        return <ProductCard
                            key={index}
                            num={item.count}
                            price={item.restorativesprice}
                            title={item.restorativesname}
                            thumb={item.restorativesimage}
                        />
                    })
                }
                <Cell title='优惠券' value='无可用' isLink />
                <Cell title='运费' value='免运费' />
            </div>

            <div style={{ marginTop: '10px' }}>
                <Cell.Group card>
                    <Cell title='发票消息' value={<Switch defaultChecked size="24px" />} />
                    <Cell title='买家留言' value='对本次交易的说明' />
                </Cell.Group>
            </div>
            <div className="demo-submit-bar"><SubmitBar price={totalprice} label='应付金额：' onSubmit={() => handpay()} buttonText="立即支付" /></div>
        </div>
    )
}

export default Index